
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/qudaoshouzhi">财务收支</router-link>><router-link to="/tuiguang">录入推广支出数据</router-link></div>
          <div class="hei10"></div>
                <div class="qdcenter">
                  <div class="qdtitle">录入推广支出数据</div>
                  <div class="qdtop">
                    <div class="flex" style="justify-content: space-between;">
                      <div class="flex" style="background: #EAEAEA; flex-basis: 300px; padding: 10px 20px;">
                        推广支出为：平台扣点、直通车等项目、刷单本金、刷单佣金、 等所有平台支出项目总和，此处按周录入。
                      </div>
                      <div class="flex" style="padding-top: 18px;">
                        <div style="line-height: 36px;">销售渠道</div>
                        <div><el-input v-model="source" placeholder="请输入店铺名"></el-input></div>
                        <div><el-button type="danger" @click='search'>搜索</el-button></div>
                      </div>

                    </div>
                  </div>
                  <div class="qdlist">
                    <div class="list listth flexs">
                        <div class="th" style="display: flex; justify-content: center; align-items: center;">销售渠道</div>
                        <div class="th">
                          <div style="border-bottom: 1px #FFFFFF solid;">{{month[0]}}</div>
                          <div class="flexs"><div class="bor1">推广费用</div><div>物流费用</div></div>
                        </div>
                        <div class="th">
                          <div style="border-bottom: 1px #FFFFFF solid;">{{month[1]}}</div>
                          <div class="flexs"><div class="bor1">推广费用</div><div>物流费用</div></div>
                        </div>
                        <div class="th">
                          <div style="border-bottom: 1px #FFFFFF solid;">{{month[2]}}</div>
                          <div class="flexs"><div class="bor1">推广费用</div><div>物流费用</div></div>
                        </div>
                    </div>
                    <div class="list listtd flexs" >
                        <div class="dianpulist">
                          <div class="td bor2" v-for="item in list[0]" :key='item.sid'>{{item.shop_name}}</div>
                        </div>
                        <div class="ssy">
                            <div class="bor2 flexs" v-for="item in list[0]" :key='item.sid'>
                                  <div class="flexs">
                                    <div class="sr" v-if="item.propagate_expend == null">暂无</div>
                                    <div class="sr" v-if="item.propagate_expend != null">{{item.propagate_expend}}</div>
                                    <div class="fx"><i class="el-icon-edit-outline" style="color: #1989FA; font-size: 18px; font-weight: 600;" @click="fixp(item.id,item.track_expend,item.sid,month[0])"></i></div>
                                  </div>
                                  <div class="flexs">
                                    <div class="sr" v-if="item.track_expend == null">暂无</div>
                                    <div class="sr" v-if="item.track_expend != null">{{item.track_expend}}</div>
                                    <div class="fx"><i class="el-icon-edit-outline" style="color: #1989FA; font-size: 18px; font-weight: 600;" @click="fixt(item.id,item.propagate_expend,item.sid,month[0])"></i></div>
                                  </div>
                            </div>
                        </div>
                        <div class="sy">
                            <div class="bor2 flexs" v-for="item in list[1]" :key='item.sid'>
                                  <div class="flexs">
                                    <div class="sr" v-if="item.propagate_expend == null">暂无</div>
                                    <div class="sr" v-if="item.propagate_expend != null">{{item.propagate_expend}}</div>
                                    <div class="fx"><i class="el-icon-edit-outline" style="color: #1989FA; font-size: 18px; font-weight: 600;" @click="fixp(item.id,item.track_expend,item.sid,month[1])"></i></div>
                                  </div>
                                  <div class="flexs">
                                    <div class="sr" v-if="item.track_expend == null">暂无</div>
                                    <div class="sr" v-if="item.track_expend != null">{{item.track_expend}}</div>
                                    <div class="fx"><i class="el-icon-edit-outline" style="color: #1989FA; font-size: 18px; font-weight: 600;" @click="fixt(item.id,item.propagate_expend,item.sid,month[1])"></i></div>
                                  </div>
                            </div>
                        </div>
                        <div class="y">
                            <div class="bor2 flexs" v-for="item in list[2]" :key='item.sid'>
                                  <div class="flexs">
                                    <div class="sr" v-if="item.propagate_expend == null">暂无</div>
                                    <div class="sr" v-if="item.propagate_expend != null">{{item.propagate_expend}}</div>
                                    <div class="fx"><i class="el-icon-edit-outline" style="color: #1989FA; font-size: 18px; font-weight: 600;" @click="fixp(item.id,item.track_expend,item.sid,month[2])"></i></div>
                                  </div>
                                  <div class="flexs">
                                    <div class="sr" v-if="item.track_expend == null">暂无</div>
                                    <div class="sr" v-if="item.track_expend != null">{{item.track_expend}}</div>
                                    <div class="fx"><i class="el-icon-edit-outline" style="color: #1989FA; font-size: 18px; font-weight: 600;" @click="fixt(item.id,item.propagate_expend,item.sid,month[2])"></i></div>
                                  </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>

		<!-- <foot></foot> -->
	</div>
</template>

<script>
	import axios from "axios";
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
  import moment from "moment";
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'yugu',
		data(){
			return{
        input:"",
        page:1,
        pagesize:20,
        total:0,
        loading:false,
        sr:true,
        list:"",
        month:[],
        source:""
			}
		},
		created() {
        this.getlist()
        this.month = [moment().subtract(2, "months").format("YYYYMM"),moment().subtract(1, "months").format("YYYYMM"),moment().format("YYYYMM")];
        console.log(this.month)
		},
    methods:{
      timechange:function(){
          this.start = this.time[0]
          this.end = this.time[1]
      },
      search:function(){
          this.getlist()
      },
      //翻页
      fanye:function(page){
      	this.loading = true
      	this.page = page
      	this.getlist()
      },
      //获取列表
      getlist:function(){
          var that = this
          axios.get('/api/plan-market/propagate/list?source='+this.source)
          	.then(response => {
          		if(response.data.msg.code == 0){
                        that.list = response.data.data
                        that.loading = false
          		}else{
          			that.$message.error(response.data.msg.info);
          		}
          	})
      },
      fixp:function(id,t,sid,month){
          var that = this
          this.$prompt('请输入费用', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
              var data = {}
              if(id != null){
                data['id'] = id
              }else{
                data['store_id'] = sid
              }
              data['propagate_expend'] = value
              data['month'] = month

              if(t == null){
                data['track_expend'] = 0
              }else{
                data['track_expend'] = t
              }
              axios.post('/api/plan-market/propagate/Log',data)
              	.then(response => {
              		if(response.data.msg.code == 0){
                    that.loading = true
                    that.getlist()
                    that.$message.success(response.data.msg.info);
              		}else{
              			that.$message.error(response.data.msg.info);
              		}
              	})
          })
      },
      fixt:function(id,p,sid,month){

          var that = this
          this.$prompt('请输入费用', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
              var data = {}
              if(id != null){
                data['id'] = id
              }else{
                data['store_id'] = sid
              }
              data['track_expend'] = value
              data['month'] = month
              if(p == null){
                data['propagate_expend'] = 0
              }else{
                data['propagate_expend'] = p
              }
              axios.post('/api/plan-market/propagate/Log',data)
              	.then(response => {
              		if(response.data.msg.code == 0){
                    that.loading = true
                    that.getlist()
                    that.$message.success(response.data.msg.info);
              		}else{
              			 that.$message.error(response.data.msg.info);
              		}
              	})
          })
      }
    },
    mounted(){

    }
	}
</script>

<style lang="scss" scoped>
	.index{

      .team{ background: #F9F9F9;}
      .powertop{ display: flex; width: 640px; }
      .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
      .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}

      .title{ background: #EAEAEA; padding:10px;}
      #main{ width: 100%; height:600px;}

      .qdcenter{
        .qdtitle{ padding:0 0 0px 20px; font-size: 16px; background: #EAEAEA; line-height: 40px;}
        .list{ text-align: center; line-height: 50px;
          .th{ flex: 1; background: #EAEAEA; font-weight: bold; border: 1px #FFFFFF solid;}
          .td{ flex: 1; border-bottom: 1px #EAEAEA solid; height: 50px; overflow: hidden; font-size: 14px; }
        }
      }
      .qdtop{padding: 30px 20px;
        div{ margin-right: 10px;}
        .el-button--danger{ padding: 9px 10px !important;}
        .month{ line-height: 24px; position: relative; height: 24px; top:6px; border:1px #EAEAEA solid; font-size: 14px; padding: 0 6px; cursor:pointer;}
        .mact{ background: #EEF7FF; color:#FFFFFF;}
      }
      .flex{ display: flex;}
      .flexs{ display: flex; justify-content: space-between; text-align: center;
        div{ flex: 1; }
        .bor1{ border-right: 1px #FFFFFF solid;}
        .bor2{ border-right: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid;
          .el-input__inner{border: none; flex: 1;}
          .sr{ flex: 1.5; cursor:pointer; border-right: 1px #EAEAEA solid;}
          .fx{ flex: 1; cursor:pointer; border-right: 1px #EAEAEA solid;}
        }
      }

	}
</style>
